<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title>PlaygroundIdeas - All Designs</title>
		<link rel="icon" type="image/png" href="images/favicon.ico" />

        <!-- jscript -->
        <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

        <!-- main page styles -->
        <link rel="stylesheet" href="css/style.css" />
        
        <style type="text/css">
            img {
                height: 100px;
                border: 1px solid black;
            }
        </style>

        <script type="text/javascript">
            $(document).ready(function() {
                // TODO Show loading mask
                $.getJSON("get_designs.php", function(list) {
                    // TODO Hide loading mask
                    $.each(list, function(index, design) {
                        $("<tr />")
                            .append(
                                $("<td />")
                                    .append(
                                        $("<a />")
                                            .attr("href", "show_design.php?publicToken=" + design.public_token)
                                            .html(design.name)
                                    )
                            )
                            .append(
                                $("<td />").html(design.created_date)
                            )
                            .append(
                                $("<td />")
                                    .append(
                                        $("<img />").attr("src", design.image)
                                    )
                            )
                            .appendTo("#list");
                    });
                });
            });
        </script>

    </head>

    <body>
        <div id="mainContent">
            <table id="list">
                <tr>
                    <th>Name</th>
                    <th>Created</th>
                    <th>Thumbnail</th>
                </tr>
            </table>
            
            <div class="links">
                <a href="index.php">This looks like fun, let me create a new playground design of my own</a>
            </div>
        </div> <!--end mainContent -->

    </body>
</html>